<template>
	<div class="courseTaskManager w944">
		<alert ref="alert"></alert>
		<deleteAlert ref="deleteAlert"></deleteAlert>
		<div class="label_top">
			<p><i class="line"></i>课程任务管理</p>
		</div>
		<div class="label_table">
			<div class="el-tabs-report">
				<a class="listOne" @click="createTask" v-if="courseTaskManager.kcrw_add">添加课程任务</a>
				<el-cascader v-model="courseClassify" :options="options" :props="optionProps" :show-all-levels='false' placeholder="课程分类" class="th_2" @change="getTableList"></el-cascader>
				<div class="msearch">
					<input placeholder="请输入课程关键词……" v-model="search"/>
					<a @click="getTableList"><img src="../../assets/qudaoImg/search.png"/></a>
				</div>
			</div>
			<el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="60"></el-table-column>
				<el-table-column prop="courseName" label="课程名称"></el-table-column>
				<el-table-column label="学习人员" width="100">
					<template slot-scope="scope">
						<el-button @click="handleStudyPeople(scope.row)">{{scope.row.studyCnt}}人</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="150">
					<template slot-scope="scope">
						<div class="status" v-if="scope.row.status==4">
							<el-button @click="handleRelease(scope.row)" v-if="courseTaskManager.kcrw_release">发布</el-button>
							<el-button @click="handleEdit(scope.row)" v-if="courseTaskManager.kcrw_edit" class="blue">编辑</el-button>
							<el-button @click="handleDelete(scope.row)" v-if="courseTaskManager.kcrw_del" class="red">删除</el-button>
						</div>
						<div class="status" v-if="scope.row.status==5">
							<span style="margin-right: 5px;">已发布</span>
							<el-button @click="handleSee(scope.row)" v-if="courseTaskManager.kcrw_seen" class="blue">查看</el-button>
							<el-button @click="handleDelete(scope.row)" v-if="courseTaskManager.kcrw_del" class="red">删除</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div class="fenyeMargin">
				<el-button @click="toggleSelection(tableData)" class="allSelect">全选</el-button>
				<el-button @click="handleDeleteAll" class="allDelete" v-if="courseTaskManager.kcrw_delAll">批量删除</el-button>
				<div class="pag_block">
					<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
				</div>
			</div>
			<div class="studyPeople" v-show="studyPeople">
				<a @click="studyClose" class="studyClose">&#10005;</a>
				<p>查看课程《{{this.studyCourseTit}}》下学习人员情况</p>
				<div class="studyLine">
					<div class="msearch">
						<input placeholder="请输入关键词查找……" v-model="studyKeySearch"/>
						<a @click="getPageSearch"><img src="../../assets/qudaoImg/search.png"/></a>
					</div>
				</div>
				<el-table :data="tableDataWrap" border>
					<el-table-column label="序号" width="60">
						<template slot-scope="scope">{{scope.row.sort}}</template>
					</el-table-column>
					<el-table-column prop="nickname" label="姓名"></el-table-column>
					<el-table-column prop="phone" label="账号/手机号"></el-table-column>
					<el-table-column prop="organizationName" label="组织机构" width="300"></el-table-column>
					<el-table-column prop="starttime" label="开始时间"></el-table-column>
					<el-table-column prop="endtime" label="完成时间"></el-table-column>
					<el-table-column prop="status" label="学习进度">
						<template slot-scope="scope">
							<span v-if="scope.row.status==1">待学习</span>
							<span v-if="scope.row.status==2">学习中</span>
							<span v-if="scope.row.status==3">已完成</span>
							<span v-if="scope.row.status==-1">未发布</span>
						</template>
					</el-table-column>
				</el-table>
				<div class="studyPag">
					<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import alert from '../../components/Alert.vue';
	import deleteAlert from '../../components/deleteAlert.vue';
	export default {
		data() {
			return {
				updateTitle:'',
				courseTaskManager:'',
				courseClassify: '',
				options: [],
				optionProps: {
				    value: 'id',
				    label: 'columnName',
				    children: 'childList'
				},
				search:'',
				tableData:[],
				multipleSelection: [],

				studyPeople:false,
				sort:'',
				studyCourseTit:'',
				studyProgress:'',
				studyProgressArr:[],
				studyKeySearch:'',
				tableDataWrap:[],
 				deleteType:'delete',
				pagesize: 15,
		        currentpage: 1,
		        total: 1
			}
		},
		methods: {
			getTableList(){
				this.$ajax({
					url: this.$root.jifuUrl + "/getPlatformCompulsuryCoursePage?" +'page='+this.currentpage +'&num='+this.pagesize +'&columnid='+this.courseClassify +'&courseName='+this.search+'&rootcompanyid='+1,
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total=res.data.data.pageParam.items;
						}
					}
				});
			},
			createTask(){
				this.$router.push({
					name: 'createTask'
				})
			},
			handleStudyPeople(row){
				this.studyPeople = true;
				this.studyCourseTit = row.courseName;
				this.$ajax({
					url: this.$root.jifuUrl + "/getPlatformCompulsuryCourseUserInfo?" +'page='+this.currentpage +'&num='+this.pagesize +'&courseid='+row.courseid,
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							this.tableDataWrap = res.data.data.list;
							for(var i = 0;i<this.tableDataWrap.length;i++){
								this.tableDataWrap[i].sort=i+1
							}
							this.total=res.data.data.pageParam.items;
						}
					}
				});
			},
			studyClose(){
				this.studyPeople = false
			},
			handleRelease(row){
				this.transitionRow = row;
				this.$rootFunction().rootRelease();
			},
			fabuSubmit(){
				var s={id:this.transitionRow.id};
				this.$ajax({ 
					url: this.$root.jifuUrl + "/release",
					method: 'POST',
					data: this.qs.stringify(s),
					success: res => {
						if (res.data.code == 200) {
							this.$rootFunction().releaseResSuccess();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			handleSee(row) {
				this.$ajax({
					url: this.$root.jifuUrl + "/getPlatformCompulsuryCourseById?" + 'id=' + row.id,
					method: 'GET',
					success: res => {
						if(res.data.code == 200) {
							this.$router.push({
								name: 'createTask',
								params: {
									type: 'see',
									rootcompanyid:this.identity
								}
							})
							this.$root.courseTaskManagerMsg = res.data.data;
//							console.log('102',this.$root.courseTaskManagerMsg);
						}
					}
				});
			},
			handleSelectionChange(val) {
				this.multipleSelection = [];
				for(var i = 0;i<val.length;i++){
					this.multipleSelection.push(val[i].id)
				}
			},
			handleEdit(row) {
				this.$ajax({
					url: this.$root.jifuUrl + "/getPlatformCompulsuryCourseById?"+'id='+row.id,
					method: 'GET',
					data:{},
					success: res => {
						if(res.data.code == 200) {
							this.$router.push({
								name: 'createTask',
								params: {
									type: 'edit'
								}
							})
							this.$root.courseTaskManagerMsg = res.data.data;
//							console.log('102',this.$root.courseTaskManagerMsg);
						}
					}
				});
			},
			handleDelete(row){
				this.transitionRow = row;
				this.$rootFunction().rootDelete();
			},
			// 批量删除
			handleDeleteAll(){
				this.$rootFunction().rootDeleteAll();
			},
			deleteSubmit() {
				if(this.deleteType == 'delete'){
					let s={id:this.transitionRow.id}
					this.$ajax({ 
						url: this.$root.jifuUrl + "/deletePlatformCompulsuryCourse",
						method: 'POST',
						data:this.qs.stringify(s),
						success: res => {
							if(res.data.code == 200) {
								this.$rootFunction().deleteResSuccess();
							}else{
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					});
				}else{
					let s={id:this.multipleSelection.join(',')};
					this.$ajax({ 
						url: this.$root.jifuUrl + "/deletePlatformCompulsuryCourse",
						data:this.qs.stringify(s),
						method: 'POST',
						success: res => {
							if(res.data.code == 200) {
								this.$rootFunction().deleteResSuccess();
							}else{
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					});
				}
			},
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getTableList();
			},
			getPageSearch(){
				this.currentpage=1;
				this.getTableList();
			},
			getTreeData(data){
				for(var i=0;i<data.length;i++){
					if(data[i].childList.length<1){
						data[i].childList=undefined;
					}else {
						this.getTreeData(data[i].childList);
					}
				}
				return data;
        	},
			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row, !this.allSelect)
					})
					this.allSelect = !this.allSelect;
				}
			},
			getColumnList(){
				let columnType = [1];
				this.$rootFunction().columnList({columnType});
			},
		},
		components: {
			alert,
			deleteAlert
		},
		mounted: function() {
			this.getTableList();
			this.getColumnList();
			this.courseTaskManager = this.$root.huasan.courseTaskManager;
		}
	}
</script>

<style>
	.studyPeople{width: 900px;height: 400px;background: #fff;border: 1px solid #ccc;position: fixed;top: 50%;left: 50%;margin-top: -200px;margin-left: -450px;z-index: 999;border-radius: 10px;padding: 20px;overflow-x: hidden;font-size: 14px}
	.studyClose{width: 15px;height: 15px;position: absolute;top: 20px;right: 20px;cursor: pointer;}
	.studyLine{margin: 10px 0 20px;overflow: hidden;position: relative;}
	.studyLine .el-select{position: absolute;top: 0;right: 225px}
	.studyLine .el-select,.studyLine .el-input,.studyLine input{height: 33px;line-height: 33px}
	.studyLine .el-input__icon{line-height: 34px}
	.studyLine .msearch{float: right;position: relative;}
	.studyLine .msearch input{width: 200px;height: 33px;line-height: 33px;padding-left: 10px;border: 1px solid #DCDFE6;border-radius: 3px;font-size:14px;color: #999;box-sizing: border-box;}
	.studyLine .msearch a{height: 33px;display: inline-block;position: absolute;top: 0;right: 0}
	.studyPag{margin-top: 15px;text-align: right;}
</style>